<template>
    <div>
        <header>
        </header>
        <div class="my bx">
            <div class="top">
                <div>
                    <img src="@/../public/img/个人头像.svg" alt="" v-show="!obj">
                    <img :src="obj.avatar" alt="" v-show="obj" @click="$router.push('mycode')" class="myimg">
                    <span @click="login" v-show="!obj">登录/注册</span>
                    <span v-show="obj">{{obj.login_name}}</span>
                </div>
                <div>
                    <div class="icons">
                        <img src="../../../public/img/笔.svg" alt="">
                        编辑
                    </div>
                </div>
            </div>
            <div class="bottom">
                <div>
                    <div>0</div>
                    <div>我的课程</div>
                    <div>-已购课程学习-</div>
                </div>
                <div>
                    <div>0</div>
                    <div>我的预约</div>
                    <div>-一对一老师预约-</div>
                </div>
                <div>
                    <div>0</div>
                    <div>剩余学生币</div>
                    <div>-查看剩余学习币-</div>
                </div>
            </div>
        </div>
        <div class="nvv bx">
            <div>
                <img src="../../../public/img/信.svg" alt="">
            </div>
            <div>
                <div>邀请好友注册APP，享多重好礼</div>
                <div>限时特惠，多邀多得</div>
            </div>
            <div>
                <img src="../../../public/img/右箭头.svg" alt="">
            </div>
        </div>
        <div class="list bx">
            <div>课程相关</div>
            <div>
                <div>
                    <img src="../../../public/img/作业.svg" alt="">
                    我的作业
                </div>
                <div>
                    <img src="../../../public/img/老师.svg" alt="">
                    关注的老师
                </div>
                <div>
                    <img src="../../../public/img/同步收藏.svg" alt="">
                    我的收藏
                </div>
                <div>
                    <img src="../../../public/img/云下载.svg" alt="">
                    我的下载
                </div>
            </div>
        </div>
        <div class="list bx">
            <div>订单相关</div>
            <div>
                <div>
                    <img src="../../../public/img/作业.svg" alt="">
                    我的订单
                </div>
                <div>
                    <img src="../../../public/img/老师.svg" alt="">
                    收货地址
                </div>
            </div>
        </div>
        <div class="list bx">
            <div>我的账号</div>
            <div>
                <div>
                    <img src="../../../public/img/作业.svg" alt="">
                    优惠券
                </div>
                <div>
                    <img src="../../../public/img/老师.svg" alt="">
                    学习卡
                </div>
                <div>
                    <img src="../../../public/img/同步收藏.svg" alt="">
                    会员
                </div>
            </div>
        </div>
        <div class="list bx">
            <div>自助服务</div>
            <div>
                <div>
                    <img src="../../../public/img/作业.svg" alt="">
                    意见反馈
                </div>
                <div>
                    <img src="../../../public/img/老师.svg" alt="">
                    我的消息
                </div>
                <div>
                    <img src="../../../public/img/同步收藏.svg" alt="">
                    在线客服
                </div>
                <div @click="$router.push('/set')">
                    <img src="../../../public/img/云下载.svg" alt="">
                    设置
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const obj = ref(JSON.parse(localStorage.getItem('msmkcode')) || '')
const { push } = useRouter()
const login = () => {
    push('/note')
}

</script>

<style lang="scss" scoped>
header {
    width: 100%;
    background: url(../../../public/user_bg.png) no-repeat;
    background-size: 100% 100%;
    height: 100px;
}

.bx {
    width: 92%;
    margin: 0 auto;
}

.my {

    background-color: #fff;
    height: 120px;

    margin-top: -50px;
    border-radius: 4px;

    .top {
        height: 70px;
        display: flex;
        justify-content: space-between;

        >div {
            flex: 1;
            vertical-align: middle;
            position: relative;


            >img {
                width: 40%;
                height: 80%;
                vertical-align: middle;
            }

            .icons {
                position: absolute;
                right: 0;
                top: 10px;
                width: 60px;
                height: 20px;
                background-color: #fb5500;
                border-radius: 10px 0 0 10px;
                color: #000;
                font-size: 8px;
                color: #fff;
                vertical-align: middle;
                padding-top: 0.05rem;
                box-sizing: border-box;

                >img {
                    width: 30%;
                    height: 90%;
                    margin: 0 .10rem;
                    vertical-align: middle;
                }
            }
        }
    }

    .bottom {
        height: 50px;
        width: 100%;
        display: flex;
        justify-content: space-around;

        >div {
            width: 28%;
            text-align: center;

            >div:nth-child(1) {
                color: red;
                font-size: 12;
            }

            >div:nth-child(2) {
                font-size: 10px;
            }

            >div:nth-child(3) {
                color: #ccc;
                font-size: 8px;
            }
        }
    }
}

.nvv {
    height: 40px;
    width: 92%;
    margin: auto;
    background: url(@/../public/login-btn.png) no-repeat;
    background-size: 100% 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    >div:nth-child(1) {
        width: 16%;
        box-sizing: border-box;


        >img {
            width: 80%;
            height: 80%;
            margin: 10% 20%;

        }
    }



    >div:nth-child(3) {
        width: 16%;
        box-sizing: border-box;


        >img {
            width: 50%;
            height: 50%;
            margin: 25% 20%;

        }
    }

    >div:nth-child(2) {
        flex: 1;
        color: #fff;
        text-indent: 6px;


        >div:nth-child(1) {
            font-size: 8px;
            margin: 6px 0;
        }

        >div:nth-child(2) {
            font-size: 7px;

        }

    }
}

.list {
    width: 92%;
    margin-left: 4%;
    height: 90px;
    background-color: #fff;
    border-bottom: 1px solid #ccc;

    >div:nth-child(1) {
        font-size: 14px;
        font-weight: 600;
        margin: 6px 0;
        text-indent: 2px;
        padding: 2px 0;
    }

    >div:nth-child(2) {
        width: 100%;
        height: 60px;

        display: flex;
        box-sizing: border-box;

        >div {
            width: 25%;
            height: 100%;
            text-align: center;
            font-size: 12px;

            >img {
                width: 40%;
                height: 40%;
                margin: 10% 0;
                margin-left: 30%;
                display: block;


            }
        }
    }

}

.myimg {
    width: 46px !important;
    height: 46px !important;
    margin: 10px;
}
</style>